<template>
	 <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="82px">
      <el-form-item label="运营商类型" prop="ispType">
        <el-select v-model="queryParams.ispType" placeholder="运营商类型">
			<el-option key="0" label="中国移动" value="移动"></el-option>
			<el-option key="1" label="中国联通" value="联通"></el-option>
			<el-option key="2" label="中国电信" value="电信"></el-option>
		</el-select>
      </el-form-item>
     <el-form-item label="套餐编号" prop="pricingId">
        <el-input
          v-model = 'queryParams.pricingId'
          placeholder="套餐编号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="套餐名称" prop="pricingName">
        <el-input
          v-model = 'queryParams.pricingName'
          placeholder="套餐名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model = 'queryParams.remark'
          placeholder="备注"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-search" size="mini" @click="search">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
     </el-form>
      <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-document-add"
          size="mini"
          v-hasPermi="['whty:discount:add']"
          @click='addList'
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          v-hasPermi="['whty:discount:updatePrice']"
          @click='changemostPrice'
        >批量改价</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-upload2"
          size="mini"
          v-hasPermi="['whty:discount:export']"
          @click='exportBtn'
        >导出</el-button>
      </el-col>
    </el-row>
    
     <el-table v-loading="loading" :data="tcList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="套餐编号" align="center" prop="pricingId" />
      <el-table-column label="套餐名称" align="center" prop="pricingName" />
      <el-table-column label="运营商" align="center" prop="agentNmae" />
    <!--  <el-table-column label="上游套餐编码" align="center" prop="upPricingId" />-->
      <el-table-column label="运营商类型" align="center" prop="ispType"  >
      	 <template slot-scope="scope">
          <el-tag v-if="scope.row.ispType=='移动'">移动</el-tag>
          <el-tag type="success" v-if="scope.row.ispType=='联通'">联通</el-tag>
          <el-tag type="info" v-if="scope.row.ispType=='电信'">电信</el-tag>
        </template> 
        </el-table-column>
	   <el-table-column label="状态" align="center" prop="status" > 
	  	<template slot-scope="scope">
          <el-tag v-if="scope.row.status=='0'">上架</el-tag>
          <el-tag type="success" v-if="scope.row.status=='1'">下架</el-tag>
        </template> 
        </el-table-column>
		<el-table-column label="金额(元)" align="center" prop="monthCost" :formatter='costFormat' />
		<el-table-column label="备注" align="center" prop="remark"  />
		<!--<el-table-column label="成本(元)" align="center" >
			<template slot-scope="scope">
				<el-row>
					<el-col :span='12'><el-input v-model='scope.row.monthCost'></el-input></el-col>
					<el-col :span='2'><el-button type='primary' @click='changePrice(scope.row.id,scope.row.monthCost)'  v-hasPermi="['whty:discount:edit']" >修改</el-button></el-col>
				</el-row>
			</template>
		</el-table-column>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
          <el-button @click='editList(scope.row.id,scope.row.monthCost)' type="primary"    v-hasPermi="['whty:discount:edit']" icon="el-icon-edit" circle></el-button>
          <el-button @click='deleteList(scope.row.id,scope.row.monthCost)' type="danger"    v-hasPermi="['whty:discount:remove']" icon="el-icon-delete" circle></el-button>
        </template> 
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getTczkListFn"
    />
    <!-- 编辑-->
	        <el-dialog :title="title" :visible.sync="openTC" width="700px" :close-on-click-modal='false'>
    			<el-form ref="form" :rules="rules" :model="tcData" label-width="140px">
			        <!--<el-form-item label="代理商" prop='agentId'>
			          <el-select v-model="tcData.agentId" >
					     <el-option v-for='item in userIdList' :key="item.userId" :label="item.userName" :value="item.userId"></el-option>
					  </el-select>
			        </el-form-item>-->
			         <el-form-item label="代理商" prop="userName">
			           <el-select :value="tcData.userName" placeholder='请选择代理商' :clearable='clearable' @clear="clearHandle" ref='chooseUser'>
					        <el-option :value="tcData.userName" label="" style='height:200px;overflow-y: scroll;width: 100%;background: white;'>
									  <el-tree  :data="userList" :props="props" :accordion="accordion"  @node-click="handleNodeClick"></el-tree>
					       </el-option>
						</el-select>
			        </el-form-item>
			        
			        <el-form-item label="套餐" prop='pricingId'>
			          <el-select v-model="tcData.pricingId" @change='chooseTc'>
			          	<el-option v-for='item in taocanTypeList' :key='item.pricingId' :label="item.pricingName" :value="item.pricingId"></el-option>
					  </el-select>
			        </el-form-item>
			        <el-form-item label="套餐类型" prop="pricingType">
         	    	<el-radio-group v-model="tcData.pricingType" >
						    <el-radio :label="0" value='0' disabled>流量</el-radio>
						    <el-radio :label="1" value='1' disabled>语音</el-radio>
						    <el-radio :label="2" value='2' disabled>短信</el-radio>
						    <el-radio :label="3" value='3' disabled>混合</el-radio>
						  </el-radio-group>
        			</el-form-item>
			         <el-form-item label="上游套餐编码" prop='upPricingId'>
    				  <el-col :span='10'><el-input disabled v-model="tcData.upPricingId" placeholder="" /></el-col>
			        </el-form-item>
			        <el-form-item label="状态" >
			          <el-select v-model="tcData.status">
					     <el-option key="0" label="上架" value="0"></el-option>
					     <el-option key="1" label="下架" value="1"></el-option>
					  </el-select>
			        </el-form-item>
			        <el-form-item label="成本(元)" prop='monthCost'>
    				  <el-col :span='10'><el-input v-model="tcData.monthCost" placeholder="" /></el-col>
			        </el-form-item>
			         <el-form-item label="备注" >
    				  <el-col :span='10'><el-input  type='textarea' v-model="tcData.remark" placeholder="" /></el-col>
			        </el-form-item>
			       
			        <el-row><el-col :span='4' :offset='8'><el-button @click='saveList' type="primary">确定</el-button></el-col><el-col :span='4'><el-button @click='cancle' type="">取消</el-button></el-col></el-row>
    			</el-form>
    		</el-dialog>
    		 <el-dialog title="批量改价" :visible.sync="openTCDiscount" width="700px">
    		 	<el-form ref="formPrice" :rules="rules" label-width="140px" :model='disCountData'>
    		 		<el-form-item label="折扣(%)" prop='disCount'>
    				  <el-col :span='10'><el-input v-model="disCountData.disCount" placeholder="" /></el-col>
			        </el-form-item>
			        <el-form-item label="*注意：">
    				  <el-col :span='10'>以套餐标准价为基准 折扣是百分比制，需在1到100之间</el-col>
			        </el-form-item>
			         <el-row><el-col :span='4' :offset='8'><el-button @click='saveDiscount' type="primary">确定</el-button></el-col><el-col :span='4'><el-button @click='cancle' type="">取消</el-button></el-col></el-row>
    		 	</el-form>
    		 </el-dialog>
    		 
    		 
    		 
    		  <!-- 导入 -->
    <!--<el-dialog :title="title" :visible.sync="importOpen" width="500px">
      <el-form ref="importForm" :model="importForm" :rules="rules" label-width="80px">
        <el-form-item label="运营商">
          <el-select v-model="importForm.userId">
			  <el-option v-for='item in userList' :key='item.userId' :label="item.userName" :value="item.userId"></el-option>
		  </el-select>
        </el-form-item>
        <el-form-item label="状态:" prop='status'>
	          <el-select v-model="importForm.status">
			     <el-option key="0" label="上架" value="0"></el-option>
			     <el-option key="1" label="下架" value="1"></el-option>
			  </el-select>
		</el-form-item>
        <el-form-item label="选择文件" prop="postSort">
          <el-col :span='8'>  
          	<el-upload
					  class="upload-demo"
					  :on-change="handleChange"
					  :on-preview="handlePreview"
					  :on-remove="handleRemove"
					  :before-remove="beforeRemove"
					   action="/system/info/importData"
					   multiple
					  :limit="3"
					  :on-exceed="handleExceed"
					  :file-list="fileList">
					  <el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
          </el-col>
          <el-col :span='10' ><el-link type='primary' @click='downLoadModel'>点击下载模板文件</el-link></el-col>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="importForm.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormImport">确 定</el-button>
        <el-button @click="cancelImport">取 消</el-button>
      </div>
    </el-dialog>-->
    </div>
</template>

<script>
	import {getTczkList,deleteTczkList,editTczkList,tczkListOne,addTczkList,getTcListZK,getAgentUser,updatePrice,exportTczk,selectListByispType,importDataTczk} from "@/api/tczf/tc";
	import { treeselect } from "@/api/system/dept";
	export default{
		 props:{
	   	 props: {
	      children: 'children',
	      label: 'label',
	    },
       	 /* 自动收起 */
	    accordion:{
	      type:Boolean,
	      default:()=>{ return false }
			},
			 /* 可清空选项 */
	    clearable:{
	      type:Boolean,
	      default:()=>{ return true }
			},
       },
		data(){
			return{
				queryParams:{
					pageNum:1,
					pageSize:10,
					ispType:null,   //运营商
					pricingName:null,  //套餐名称
					pricingId:null,   //套餐编号
					remark:null  //备注
				},
				fileList:[],  //上传文件列表
				single:'',
				multiple:'',
				title:'',
				tcList:[],
				total:0,  //总条数
				loading:false,
				importOpen:false,  //导入的弹框显示
				openTC:false,    //修改套餐弹框
				openTCDiscount:false, //折扣弹框
				taocanTypeList:[],  //套餐类型
				userList:[],  //代理商商列表
				isEdit:false,   //是否编辑
				disCountData:{//折扣值  百分比
					disCount:''
				},
				ids:'',   //选中的条数
				importForm:{  //导入运营商
					agentId :'',   //运营商ID
					status:'0',  //默认上架
					remark:''  //备注
				},
				tcData:{
					pricingId:'',  //套餐名称
					pricingType:'',   //套餐类型
					monthCost:'',  //陈本
					upPricingId:'',  //上游套餐编码
					status:'0',   //上下架
					remark:'',
					userName:'',   //代理商名称
					deptId:'',    //代理商ID
					id:''  //每条的ID
				},
				rules:{
					 monthCost:[{ required: true, message: "套餐成本不能为空", trigger: "change" }],
					 agentId:[{ required: true, message: "运营商不能为空", trigger: "change" }],
					 pricingId:[{ required: true,message: "套餐不能为空",trigger: "change" }],
					 upPricingId:[{ required: true,message: "上游套餐编码不能为空",trigger: "blur" }],
					 baseExpenses:[{ required: true,message: "标准资费不能为空", trigger: "blur" }],
					 disCount:[{ required: true,message: "折扣不能为空", trigger: "blur" }],
					 userName:[{ required: true,message: "代理商不能为空", trigger: "change" }],
				},
			}
		},
		created(){
			 treeselect().then((res)=>{  //用户列表接口
			 	console.log(res);
			    this.userList = res.data;
			 })
		},
		mounted(){
			this.getTczkListFn();
			getTcListZK().then((res)=>{
				this.taocanTypeList=  res.rows;
//				getAgentUser().then((res)=>{  //获取运营商类型
//					console.log(res);
//					this.userIdList = res.data;
//				})
			})
		},
		methods:{
			search(){  //搜索
				this.getTczkListFn();
			},
			resetQuery(){//重置
				this.resetForm("queryForm");
				this.getTczkListFn();
			},
			chooseTc(a){//选择套餐
				var taocanTypeList = this.taocanTypeList;
			    var r= taocanTypeList.filter((item)=>{return item.pricingId==a});  //上游套餐编码
			    this.tcData.upPricingId = r[0].upPricingid;
			    this.tcData.pricingType = r[0].pricingType;
			    console.log( this.tcData.pricingType );
			},
			getTczkListFn(){
				var queryParams = this.queryParams;
				this.loading = true;
				
				getTczkList(queryParams).then((res)=>{
					console.log(res);
					this.tcList=res.rows;
					this.loading = false;
					this.total = res.total;
				})
			},
			changePrice(id,price){  //修改价格
				tczkListOne(id).then((res)=>{
					console.log(res);
					this.tcData.pricingId = res.data.pricingId;
					this.tcData.upPricingId = res.data.upPricingId;
					this.tcData.status = res.data.status;
					this.tcData.remark = res.data.remark;
					this.tcData.agentId = res.data.agentId;
					this.tcData.monthCost = price;
					this.tcData.id = id;
					editTczkList(this.tcData).then((res)=>{
						console.log(res);
						if(res.code=='200'){
							this.$message({
					            type: 'success',
					            message: '修改成功!'
					          });
					          this.getTczkListFn();
						}else{
							this.$message.error('修改失败');
						}
					})
				})
			},
			editList(id,price){
				this.openTC = true;
				this.isEdit = true;
				this.title = '编辑进价';
				tczkListOne(id).then((res)=>{
					this.tcData.pricingId = res.data.pricingId;
					this.tcData.upPricingId = res.data.upPricingId;
					this.tcData.status = JSON.stringify(res.data.status);
					this.tcData.remark = res.data.remark;
					this.tcData.agentId = res.data.agentId;
					this.tcData.monthCost = price;
					this.tcData.id = id;
					this.tcData.deptId = res.data.deptId;
					this.tcData.userName = res.data.agentNmae;
					this.tcData.pricingType = res.data.pricingType;
				})
			},
			deleteList(id){  //删除某条
				this.$confirm('确定删除该条吗?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
			        deleteTczkList(id).then((res)=>{
			    		console.log(res);
			    		if(res.code==200){
			    			this.$message({
					            type: 'success',
					            message: '删除成功!'
					          });
					          this.getTczkListFn();
			    		}else{
			    			 this.$message.error('删除失败');
			    		}
			    	})
		          
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
			},
			search(){
				this.getTczkListFn();
			},
			addList(){
				this.openTC = true;
				this.isEdit = false;
				this.title = '新增进价';
				this.tcData = {
					pricingId:'',  //套餐名称
					monthCost:'',  //陈本
					upPricingId:'',  //上游套餐编码
					status:'0',   //上下架
					remark:'',
					userName:'',   //代理商名称
					deptId:'',    //代理商ID
//					agentId:'',   //运营商id
					id:''  //每条的ID
				}
			},
			saveList(){
				this.$refs["form"].validate(valid => {
				if(valid){
				if(this.isEdit){  //如果是编辑
					editTczkList(this.tcData).then((res)=>{
					if(res.code=='200'){
						this.$message({
				            type: 'success',
				            message: '编辑成功!'
					     });
						this.getTczkListFn();
					}else{
						this.$message.error('编辑失败');
					}
					this.openTC = false;
					})
				}else{
					addTczkList(this.tcData).then((res)=>{
					if(res.code=='200'){
						this.$message({
				            type: 'success',
				            message: '新增成功!'
					     });
						this.getTczkListFn();
					}else{
						this.$message.error('新增失败');
					}
					this.openTC = false;
					})
				}
				}
					})
			},
			cancle(){
				this.openTC = false;
				this.openTCDiscount = false;
			},
			changemostPrice(){  //点击批量修改
				if(this.multiple.length<=0){  //未选中
					this.$message.error('请先选择');
				}else{
					this.openTCDiscount = true;
				}
			},
			saveDiscount(){  //点击保存修改折扣
				var ids = {ids:this.ids.join(','),priceDiscount:this.disCountData.disCount/100};
				updatePrice(ids).then((res)=>{
					if(res.code=='200'){
							  this.$message({
					            type: 'success',
					            message: '修改成功!'
					          });
					          this.getTczkListFn();
					}else{
						this.$message.error('修改失败');
					}
				})
				
			},
			exportBtn(){  //导出
				exportTczk().then((res)=>{
					if(res.code==200){
						this.download(res.msg);
					}else{
						this.$message.error('导出失败');
					}
				})
			},
			 // 多选框选中数据
		    handleSelectionChange(selection) {
		      this.ids = selection.map(item => item.id)
		      this.single = selection.length!=1
		      this.multiple = selection.length
		    },
		    effectTypeFn(row,column){
		    	if(row.effectType=='0'){
		    		return '当月生效'
		    	}else if(row.effectType=='1'){
		    		return '次月生效'
		    	}else if(row.effectType=='2'){
		    		return '到期生效'
		    	}else if(row.effectType=='0,1'){
		    		return '当月生效 次月生效'
		    	}else if(row.effectType=='0,1,2'){
		    		return '当月生效 次月生效 到期生效'
		    	}
		    },
		    importBtn(){  //导入
		    	this.importOpen = true;
		    },
		    submitFormImport(){  //确认导入按钮
		    	var importData = {};
		    	//this.fileList
		    	importData.agentId = this.importForm.agentId;
		    	importData.status = this.importForm.status;
		    	importData.remark = this.importForm.remark;
	    		this.$refs["form"].validate(valid => {
					if(valid){
						importDataTczk().then((res)=>{
							
						})
					}
				})
		    },
		    cancelImport(){//取消导入
		    	this.importOpen = false;
		    },
		    //  获取文件
		    handleChange(file,fileList){
		    	this.importForm.fileList = file;
		    	this.fileList = fileList;
		    },
		     handleRemove(file, fileList) {
		        console.log(file, fileList);
		      },
		      handlePreview(file) {
		        console.log(file);
		      },
		      handleExceed(files, fileList) {
		        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		      },
		      beforeRemove(file, fileList) {
		        return this.$confirm(`确定移除 ${ file.name }？`);
		      },
		      downLoadModel(){  //点击下载模板
		      	
		      },
		      costFormat(a){
		      	var str = '';
		      	if(a.packageType=='0'){
		      		 str = a.monthCost+'/月'    
		      	}else if(a.packageType=='1'){
		      		 str = a.monthCost+'/年'
		      	}
		      	return str;
		      },
			handleNodeClick(a,e){  //卡分配  客户
			let subList=a.children;
			if (typeof(subList) != "undefined" && typeof(subList.length) != "undefined" && subList.length > 0) {
			    return;
			}
		  	this.tcData.deptId = a.id;
		  	this.tcData.userName = a.label;
	  		this.$refs.chooseUser.blur();
	  	},
	  	clearHandle(){  //清楚选项  卡导入弹框
	  		this.tcData.userName = '';
	  		this.tcData.deptId = undefined;
	  	},
		}
	}
</script>

<style>
</style>